<template>
  <view class="content">
    <ve-form ref="ve_form" :model="form" :rules="rules">
      <ve-card title="个人信息" type="none">
        <ve-cell label="姓名">{{ record.memberName || '-' }}</ve-cell>
        <ve-cell label="手机号">{{ record.phone || '-' }}</ve-cell>
        <ve-cell label="证件类型">{{ record.cardTypeName || '-' }}</ve-cell>
        <ve-cell label="证件号">{{ record.cardNumber || '-' }}</ve-cell>
      </ve-card>

      <ve-card title="" type="none">
        <ve-form-item label="失信类型" required prop="blockTypeList">
          <remote-select
            type="dishonestyType"
            :multiple="true"
            :label="form.blockTypeListStr"
            placeholder="请选择(可多选)"
            :outData="dict.blackTypeMap"
            @change="changeBlockType"
            v-model="form.blockTypeList"
          />
        </ve-form-item>

        <ve-form-item label="具体原因" prop="reason" :borderBottom="false" labelPosition="top" required>
          <ve-input type="textarea" v-model="form.reason" placeholder="请输入具体原因" />
        </ve-form-item>

        <ve-form-item label="失信凭证" labelPosition="top">
          <ve-upload v-model="form.fileIdList"></ve-upload>
        </ve-form-item>
      </ve-card>

      <ve-form-item :borderBottom="false" style="margin-top: 24rpx">
        <ve-button type="primary" @click="handleSave" size="long">确认</ve-button>
      </ve-form-item>
    </ve-form>
  </view>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { onShow, onLoad } from '@dcloudio/uni-app'
import { toBlock, memberDetail } from '@/api/market/member'
import useFormFold from '@/hooks/useFormFold'
import { usePageDict } from '@/hooks/useDict'

const dict = usePageDict('memberDict')
const form = ref({})

const record = ref({})
const { foldStatus, foldValidate } = useFormFold([
  {
    key: 'fold1',
    props: [],
  },
  {
    key: 'fold2',
    props: ['blockTypeList', 'reason'],
  },
])


const rules = ref({
  blockTypeList: {
    required: true,
    message: '请选择失信类型',
  },
  reason: {
    required: true,
    message: '请输入具体原因',
  },
})

const ve_form = ref(null)
const handleSave = () => {
  // 表单验证
  ve_form.value.validate((valid, errors) => {
    if (valid) {
      console.log('验证通过')
      const params = {
        ...form.value,
      }
      toBlock(params).then((res) => {
        if (res.code == 200) {
          uni.showToast({
            title: '操作成功',
            icon: 'none',
          })
          uni.$emit('refreshData')
          uni.navigateBack({
            delta: 1,
          })
        } else {
          uni.showToast({
            title: res.message,
            icon: 'none',
          })
        }
      })
    } else {
      foldValidate(errors)
      console.log('验证失败', errors)
    }
  })
}

// 选择失信类型
const changeBlockType = (_, option = []) => {
  form.value.blockTypeListStr = ''
  if (option.length) {
    option.forEach((item, index) => {
      if (index != option.length - 1) {
        form.value.blockTypeListStr += item.label + ' | '
      } else {
        form.value.blockTypeListStr += item.label
      }
    })
  }
}
const getDetail = async (id) => {
  console.log(id.id)
  const res = await memberDetail({ id: id.id })
  if (res.code === 200) {
    const data = res.result
    record.value = data
    form.value.id = data.id
  }
}

onShow(() => {})

onLoad((id) => {
  console.log(id)
  if (id.id) {
    getDetail(id)
  }
})
</script>

<style lang="scss" scoped>
.content {
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  padding: 24rpx;
  background: #f7f8fa;
}
.flex_img {
  display: flex;
  justify-content: space-around;
}
.ui_driving_up {
  position: relative;
  width: 284rpx;
  height: 184rpx;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  overflow: hidden;
  border-radius: 16rpx;
}
.ui_driving_up image {
  background-repeat: no-repeat;
  background-size: 100% 100%;
  width: 100%;
  height: 100%;
}
.ui_driving_down {
  position: relative;
  width: 284rpx;
  height: 184rpx;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  overflow: hidden;
  border-radius: 16rpx;
}
.ui_driving_down image {
  background-repeat: no-repeat;
  background-size: 100% 100%;
  width: 100%;
  height: 100%;
}
</style>
